<template lang="html">
  <div class="login-container">
    <div class="login">
      <div class="title">
        <img src="./smalllogo.png"/>
        <h2>云耐后台系统</h2>
      </div>
      <div class="username div-input">
           <span>用户名</span>
          <input autocomplete="off" type="text" v-model="username" ref="username" @keyup.enter="goHome">
      </div>
      <div class="password div-input">
           <span>密 &nbsp;&nbsp;&nbsp;码</span>
          <input type="password" autocomplete="off" v-model="password" ref="password" @keyup.enter="goHome">
      </div>
      <button type="button" name="button" @click="goHome"></button>
    </div>
  </div>
</template>

<script>
import {
  saveToken,
  loadToken,
  saveKey,
  loadKey
} from 'common/js/cache'

import {
  login
} from 'api/login'

import {mapGetters, mapMutations} from 'vuex'

export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
      jse: '',
      key: `-----BEGIN PUBLIC KEY-----
       MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCbdy4pFn6fulpIPJ5q1WR7jASG
       5wK0Y1wJwZISuD1icVa2MITHmKNK/7gWBpfZTnaSDoLOaqSZrU+fFBDNH+K2Kq++
       LJko/Q+SsOOOSbgzchS/WLBa0WP9VeHa3RWi/Kk8s76rsUfXSWN9vLf3FIM/X5Lj
       sshzG+wWwuLrbUsvawIDAQAB
       -----END PUBLIC KEY-----`
    }
  },
  created() {
    if (loadKey() === undefined) {
      saveKey(this.key)
    }
    this.jse = new this.$jsEncrypt.JSEncrypt()
    this.jse.setPublicKey(this.key)
    if (loadToken() && loadToken() !== 'undefined') {
      this.$router.push('/backend/index')
    }
  },
  computed: {
    ...mapGetters([
      'publicKey'
    ])
  },
  methods: {
    ...mapMutations({
      setKey: 'SET_PUBLIC_KEY'
    }),
    goHome() {
      if (this._checkName() && this._checkPass()) {
        this._login()
      }
    },
    _checkName() {
      if (!this.username) {
        this.$message({
          showClose: true,
          message: '请输入用户名',
          type: 'error'
        })
        return false
      }
      return true
    },
    _checkPass() {
      if (!this.password) {
        this.$message({
          showClose: true,
          message: '请输入密码',
          type: 'error'
        })
        return false
      }
      return true
    },
    _login() {
      // let encrypted = this.jse.encrypt(this.password)
      let encrypted = this.jse.encrypt(this.password)
      let Base64 = require('js-base64').Base64
      Base64.encode(encrypted)
      // this.username = Base64.encode(this.username)
      login(this.username, encrypted).then((res) => {
        saveToken(res.data.token)
        this.$router.push('/backend/index')
      }).catch(() => {
        this.$message({
          showClose: true,
          message: '账号或者密码错误，请检查',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
@import "~common/sass/variable.scss";
.login-container {
    width: 100vw;
    height: 100vh;
    background: url("./loginbg.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .login {
        width: 600px;
        height: 450px;
        background: rgba(34,101,241,0.5);
        border-radius:20px;
      .title{
        width: 100%;
        height: 140px;
        line-height: 150px;
        img{
         float: left;
          margin-top: 40px;
          margin-left: 100px;
        }
        h2 {
          margin-left: 20px;
          font-size: 56px;
          color: #fff;
          font-family: '华文行楷';
        }
      }

        .div-input {
          text-align: center;
          padding-top: 20px;
          span{
            font-size: 18px;
            color: #fff;
            margin-right: 20px;
          }
            input {
                border: none;
                width: 300px;
                height: 36px;
                padding: 12px 5px 12px 15px;
                outline: none;
                background-color: #3c77ef;
                flex-grow: 1;
                color:#fff;
                font-size: 14px;
            }

        }
        button {
           width: 135px;
           height: 32px;
           background: url("./loginbtn.png");
           cursor: pointer;
           margin-left: 40%;
           margin-top: 8%;
        }
    }
}
</style>
